<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SVG环形进度条</title>
    <style>
        /* 01 */
        #circleProcess {
            position: relative;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            stroke-dasharray: 255%;
            stroke-dashoffset: 255%;
            stroke: #000;
            fill: blue;
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
            color: red;
            background-color: cornflowerblue;
            border-radius: 50%;
        }

        /* 02 */
        #line {
            transition: all 2s;
            stroke-dasharray: 300, 320;
            stroke-dashoffset: 300;
        }

        svg:hover #line {
            stroke-dashoffset: 0;
        }

        /* 03 */
        #circle {
            transition: all 2s;
            stroke-dasharray: 314, 314;
            stroke-dashoffset: 314;
        }

        svg:hover #circle {
            stroke-dashoffset: 0;
        }

    </style>

</head>

<body>

    <!-- 01 -->
    <svg id="circleProcess">
        <circle id="circleS" cx="50%" cy="50%" r="40%" stroke-width="10%"></circle>
    </svg>

    <!-- 02 -->
    <svg> 　　
        <line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" />
    </svg>

    <!-- 03 -->
    <svg width="200" height="200" viewBox="0 0 200 200">
        <circle id="circle" cx="100" cy="80" r="50" fill="none" stroke-width="10" stroke="green" />
    </svg>

    <!-- svg矩形——rect -->

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
    </svg>

    <!-- 矩形，它的标签是rect。
    相关属性：width、height、style、class、x、y、rx、ry。
    x、y，分别是svg的矩形，相对svg的偏移距离。
    rx、ry 表示给矩形添加圆角。
    style 和 class 都是给当前 svg 写样式的。
    fill 表示填充颜色。 stroke-width 表示图形边框宽度。 stroke 表示边框颜色。
    opacity 表示整个图形的不透明度 fill-opacity 填充颜色的不透明度 stroke-opacity 边框的不透明度 -->

    <!-- 05 -->

    <!-- 06 -->

    <!-- 07 -->

    <svg width="500px" height="500px">
        <!-- 直线 -->
        <!-- x1, y1  x2, y2  定义两点坐标 -->
        <line x1="100" y1="100" x2="200" y2="100"></line>
        <!-- 矩形 -->
        <!-- x ， y 是起始坐标，width 和 height 是自解释的。rx, ry是定义圆角 -->
        <rect x="50" y="50" width="100" height="100" rx="10" ry="20"></rect>
        <!-- 圆形 -->
        <!-- 半径 圆心 -->
        <circle r="50" cx="220" cy="100"></circle>
        <!-- 椭圆形 -->
        <!-- x轴，y轴 圆心 -->
        <ellipse rx="100" ry="50" cx="100" cy="200"></ellipse>
        <!-- 折线 -->
        <!-- 使用 points 定义多个点 各组点使用逗号分开 -->
        <polyline points="60 50, 75 35, 100 50, 125 35, 150 50, 175 35, 190 50"></polyline>
        <!-- 多边形 -->
        <!-- 通过定义多个点 进行连线 -->
        <polygon points="125 125, 130 140, 120 140"></polygon>
        <!-- 文本 -->
        <text x="125" y="220">Hello Lambda</text>
      </svg>
      


    <script>
        
        var circleProcess = document.getElementById("circleProcess");
        var circle = document.getElementById("circleS");
        var rangeValue = 0;
        var cc;
        function setCircle() {
            rangeValue = Number(rangeValue);
            circle.setAttribute("stroke-dashoffset", (255 - rangeValue) + "%");
            rangeValue += 1;
            if (rangeValue == 240) {
                clearInterval(cc);
            }
            console.log(rangeValue);
        }
        cc = setInterval("setCircle()", 1);

    </script>
</body>

</html>